<template>
  <div
    :class="{'i-content': true, 'auto-width': autoWidth, appear, changed}"
    :title="autoWidth ? text : ''"
  >
    <span>{{text}}</span>
  </div>
</template>

<script>
export default {
  props: {
    text: null,
    autoWidth: Boolean
  },
  data() {
    return {
      appear: !!this.text,
      changed: false,
      changedCount: 0
    };
  },
  watch: {
    text(value) {
      if (this.autoWidth) {
        this.$el.style.minWidth = this.$el.parentNode.offsetWidth + 'px';
      }
      this.appear = value == null ? false : value.toString().length;
      this.changedCount++;
      if (this.changedCount > 1) {
        this.changed = true;
        setTimeout(() => {
          this.changed = false;
        }, 1100);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.i-content {
  height: 100%;
  padding-left: 8px;
  transition: 0.35s background ease-out;
  border-radius: 4px;
  text-align: left;
  overflow: hidden;

  &.appear {
    background: #f0f2f5;
  }

  &.changed {
    animation: highlight ease-in 1s;
  }

  &.auto-width {
    width: max-content;
    padding-right: 8px;
  }

  &:hover:not(.changed) {
    background: #909399;
    color: #fff;
  }
}
@keyframes highlight {
  0% {
    background: #F56C6C;
    color: #fff;
  }
  100% {
    background: #f0f2f5;
  }
}
</style>